<!--
* @Description: TablePopup.vue 数据列表弹出
* @Author: 王燕欣
* @Date: 2024-10-08 14:09
-->
<template>
  <van-popup v-model="showPopup" position="bottom" closeable :style="{ height: '60%' }">
    <div class="ku_table_popup_head">
      运行数据
    </div>
    <div class="ku_table_popup_body">
      <table :style="{width: tableWidht}">
        <thead>
          <tr>
            <th v-for="(item ,index) in columns" :key="index" :width="item.width+'px'">{{ item.name }}</th>
          </tr>
        </thead>
        <tbody v-if="processedTableData.length>0">
          <tr v-for="(row,rowindex) in processedTableData" :key="rowindex">
            <td v-for="(item ,index) in row" :key="index">{{ item }}</td>
          </tr>
        </tbody>
      </table>
      <van-empty v-if="processedTableData.length===0" description="暂无数据" />
    </div>
  </van-popup>
</template>

<script>
import dayjs from 'dayjs';
import { cloneDeep } from "lodash";
export default {
  name: "TablePopup",
  props: {
    columns: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // table 数据
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      showPopup: false,
      processedTableData: [], // 处理后的数据
      tableWidht: "100%",
    };
  },
  created() { },

  mounted() {

  },
  watch: {
  },
  methods: {
    /**
     * @Description: 显示组件
     * @Author: 王燕欣
     * @Date: 2024-10-08 14:52
     */
    async showModule() {
      // 处理数据
      this.processedTableData = await this.processingDataFun();
      // 处理table的宽度
      try {
        const clientWidth = document.documentElement.clientWidth;
        let countWidth = 0;
        for (let item = 0; item < this.columns.length; item++) {
          const itemI = this.columns[item];
          countWidth += parseInt(itemI.width);
        }
        if (clientWidth < countWidth) {
          this.tableWidht = countWidth + "px";
        } else {
          this.tableWidht = "100%";
        }
      } catch (error) {
        this.tableWidht = "100%";
      }

      this.$nextTick(() => {

        this.showPopup = true;
      });
    },

    // 数据处理，根据
    async processingDataFun() {
      // 获取array1中所有field属性
      const fieldsToKeep = this.columns.map((item) => item.field);
      // 筛选并构建新对象
      let cloneDeepTable = cloneDeep(this.tableData);
      return cloneDeepTable.map((item) => {
        item.actDateTime = dayjs(item.actDateTime).format("HH:mm:ss");// 处理时间数据
        item.addGpsMile = Number(item.addGpsMile).toString() === "NaN" ? '' : (Number(item.addGpsMile) / 1000).toFixed(2);// 处理里程数据
        const filteredItem = {};
        fieldsToKeep.forEach((field) => {
          if (Object.prototype.hasOwnProperty.call(item, field)) {
            // 检查字段是否存在
            filteredItem[field] = item[field]; // 只保留指定字段
          }
        });
        return filteredItem;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ku_table_popup_head {
  padding: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: #212121;
}
.ku_table_popup_body {
  padding: 0px 15px 15px 15px;
  width: 100%;
  height: calc(100% - 68px);
  overflow: auto; /* 允许滚动 */
  scrollbar-width: none; /* Firefox隐藏滚动条 */
  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* 自动分配列宽 */

    thead {
      position: sticky; /* 固定表头 */
      top: 0; /* 顶部位置 */
      background-color: #fff; /* 背景颜色 */
      z-index: 10; /* 使表头在其他内容之上 */
      th {
        background: rgba(0, 0, 0, 0.08);
      }
    }
    tbody {
      /* 隔行变色 */
      tr:nth-child(even) {
        background-color: #f2f2f2; /* 偶数行颜色 */
      }
      tr:nth-child(odd) {
        background-color: #ffffff; /* 奇数行颜色 */
      }
    }
    th,
    td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: center;
    }
  }
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge隐藏滚动条 */
  }
}
</style>

